<template>
    <div>
        <el-table :data="tableData">
<!--            <el-table-column property="paper" label="试卷" width="150"></el-table-column>-->
<!--            <el-table-column property="answerDate" label="日期" width="200"></el-table-column>-->

            <el-table-column :label="item.propName" :property="item.prop" v-for="(item) in tableColumnList"
                             :key="item.prop" sortable>
                <template slot-scope="scope">
                    <img v-if="item.propName==='考卷答题'" alt="丢失了" :src="scope.row.paper" style="width:100px;height:130px" />
                    <span v-else-if="item.propName==='是否激活'">
                                            <el-switch v-model="scope.row.enable"
                                                       :active-value="true"
                                                       :inactive-value="false"
                                                       active-color="#13ce66"
                                                       inactive-color="#ff4949"
                                                       @change=changEnable(scope.row)
                                            >
                                            </el-switch>
                                        </span>
                    <span v-else>{{scope.row[scope.column.property]}}</span>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="400">
                <template slot-scope="scope">
                    <el-button type="danger" icon="el-icon-delete" @click="deleteDerive(scope.row)" circle></el-button>
                </template>
            </el-table-column>
        </el-table>
        <div style="text-align:center;height:50px;line-height:50px;">
            <el-button @click="showUploadExam" type="success" class="btn btn-primary pull-right"
                       icon="el-icon-upload">重新上传试卷</el-button>
        </div>


        <el-dialog title="上传考卷"
                   :append-to-body="true"
                   :visible.sync="uploadPaperVisible"
                   width="30%">
            <el-upload
                    class="upload-demo"
                    :file-list="fileList"
                    show-file-list
                    list-type="picture"
                    :headers="{ 'Authorization': tokenStr }"
                    :before-upload="beforeAvatarUpload" action="">
                <el-button size="small" type="primary">点击上传</el-button>
            </el-upload>
            <span slot="footer" class="dialog-footer">
                <el-button @click="uploadPaperVisible = false">取 消</el-button>
                <el-button type="primary" @click="upload">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        name: "StudentAutoDerive",
        props: {
            curExamId: Number,
            username: String,
        },
        mounted() {
            this.selectStudentDeriveView();
        },
        methods: {
            deleteDerive(row){
                console.log(row.id);
                this.$confirm('此操作将永久删除这条数据,是否继续?','提示',{
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(()=> {
                    this.deleteRequest('/Excel/deleteOne/' + row.id).then(resp => {
                        if (resp) {
                            this.selectStudentDeriveView();
                        }
                    })
                })
            },
            showUploadExam() {
                this.uploadPaperVisible = true;
            },
            selectStudentDeriveView() {
                this.getRequest('/Excel/selectDeriveByExamIdAndUsername/'+this.curExamId+'/'+this.username).then(resp => {
                    if (resp) {
                        this.tableData = resp.data;
                    }
                })
            },
            // 改变学生上传试卷的激活形式
            changEnable(row){
                this.putRequest('/exam/updateExamState/'+row.id+'/'+this.curExamId+'/'+this.username+'/'+row.enable).then(resp => {
                    if (resp) {
                        // this.tableData = resp.data;
                        this.selectStudentDeriveView();
                    }
                })
            },
            beforeAvatarUpload(file) {
                let test = file.name.substring(file.name.lastIndexOf(".") + 1);
                const extension =
                    test === "jpg" ||
                    test === "JPG" ||
                    test === "png" ||
                    test === "PNG" ||
                    test === "bpm" ||
                    test === "BPM";
                const isLt50M = file.size / 1024 / 1024 < 10;
                if (!extension) {
                    this.$message({
                        message: "上传图片只能是jpg / png / bpm格式!",
                        type: "error"
                    });
                    return false; //必须加上return false; 才能阻止
                }
                // console.log(file);
                if (!isLt50M) {
                    this.$message({
                        message: "上传文件大小不能超过 10MB!",
                        type: "error"
                    });
                    return false;
                }
                this.fileList.push(file);
                return extension || isLt50M;
            },
            upload() {
                for (let i = 0; i < this.fileList.length; i++) {
                    this.formData.append("pictures", this.fileList[i]);
                }
                this.postRequest('/Oss/uploadImgFileList/' + this.curExamId, this.formData, {headers: {'Content-Type': 'multipart/form-data'}}).then(resp => {
                    if (resp) {
                        this.selectStudentDeriveView();
                        this.fileList = [];
                    } else {
                        this.$message("失败了");
                    }
                })
                this.uploadPaperVisible = false;
            },
        },
        data() {
            return {
                uploadPaperVisible: false,
                tableColumnList:
                    [
                        {prop: 'paperImg', propName: '考卷答题'},
                        {prop: 'answerDate', propName: '答卷时间'},
                        {prop: 'enable', propName: '是否激活'},
                    ],
                tableData: [{
                    "id": 0,
                    "username": "",
                    "name": "",
                    "affiliation": "",
                    "examId": "",
                    "paper": "",
                    "paperImg": null,
                    "scanAnswer": "",
                    "objScore": "",
                    "subScore": "",
                    "score": "",
                    "answerDate": "",
                    "time": "",
                    "commitUsername": null,
                    "commitRole": null
                },],
                tokenStr: localStorage.getItem('tokenStr'),
                formData: new FormData(),
                fileList: [],
            }
        }
    }
</script>

<style scoped>

</style>